/***
 * 
 */
define( [ 'Vue', 'axios' ], function ( Vue, axios ) {
    return Vue.component('system-property', {
        data : function() {
            return {
                systemProperty : { } 
            };
        },
        mounted : function () {
            var _this = this;
            axios.get( 'system-property.json?host=' + _this.$route.query.host +'&port=' +_this.$route.query.port ) .then(function (response) {
                _this.systemProperty = response.data;
            });
        },
        template : `
            <div>
                <a>GraphData</a>
                <a href="#/">INDEX PAGE</a>
                <h2>Env</h2>
                <ol>
                    <li v-for="(value, key, index) in systemProperty.env">
                        <b>{{key}}</b> = {{value}}
                        <br />
                    </li>
                </ol>
                <h2>Properties</h2>
                <ol>
                    <li v-for="(value, key, index) in systemProperty.properties">
                        <b>{{key}}</b> = {{value}}
                        <br />
                    </li>
                </ol>
            </div>
            `
    });
});